今天是第十二天我們可以寫一個javascript投履歷找工作網頁程式管理系統，以下是我的程式碼
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>投履歷找工作系統</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: left;
}
.job-listing {
margin-bottom: 20px;
}
.status {
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>投履歷找工作管理系統</h1>
<!-- 履歷上傳表單 -->
<form id="resumeForm">
<h2>上傳履歷</h2>
<input type="file" id="resume" accept=".pdf, .doc, .docx" required>
<button type="submit">上傳履歷</button>
</form>
<!-- 職位列表 -->
<h2>可申請職位</h2>
<div id="jobListings" class="job-listing">
<!-- 職位會透過 JavaScript 動態添加 -->
</div>
<!-- 已申請職位追蹤 -->
<h2>已申請職位</h2>
<table id="appliedJobs">
<thead>
<tr>
<th>職位名稱</th>
<th>公司名稱</th>
<th>申請狀態</th>
</tr>
</thead>
<tbody>
<!-- 已申請職位會透過 JavaScript 動態添加 -->
</tbody>
</table>
<script>
// 假資料 - 職位列表
const jobs = [
{ id: 1, title: '前端工程師', company: '科技公司A', status: '未申請' },
{ id: 2, title: '後端工程師', company: '科技公司B', status: '未申請' },
{ id: 3, title: '資料科學家', company: '數據公司C', status: '未申請' }
];
// 已申請職位列表
const appliedJobs = [];
// 顯示職位列表
function displayJobListings() {
const jobListings = document.getElementById('jobListings');
jobListings.innerHTML = ''; // 清空職位列表
jobs.forEach(job => {
const jobDiv = document.createElement('div');
jobDiv.classList.add('job');
const jobTitle = document.createElement('h3');
jobTitle.innerText = `${job.title} - ${job.company}`;
jobDiv.appendChild(jobTitle);
const applyButton = document.createElement('button');
applyButton.innerText = '申請此職位';
applyButton.disabled = job.status === '已申請';
applyButton.addEventListener('click', () => applyJob(job));
jobDiv.appendChild(applyButton);
jobListings.appendChild(jobDiv);
});
}
// 處理申請職位
function applyJob(job) {
job.status = '已申請'; // 更新職位狀態
// 將職位添加到已申請職位列表
appliedJobs.push({
title: job.title,
company: job.company,
status: '審核中'
});
// 重新渲染職位列表和申請追蹤列表
displayJobListings();
displayAppliedJobs();
}
// 顯示已申請職位列表
function displayAppliedJobs() {
const appliedJobsTable = document.getElementById('appliedJobs').querySelector('tbody');
appliedJobsTable.innerHTML = ''; // 清空已申請職位列表
appliedJobs.forEach(appliedJob => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${appliedJob.title}</td>
<td>${appliedJob.company}</td>
<td><span class="status">${appliedJob.status}</span></td>
`;
appliedJobsTable.appendChild(row);
});
}
// 處理履歷上傳
document.getElementById('resumeForm').addEventListener('submit', function(e) {
e.preventDefault();
const resume = document.getElementById('resume').files[0];
if (resume) {
alert('履歷上傳成功！');
} else {
alert('請選擇一個檔案。');
}
});
// 初始化
displayJobListings();
</script>
</body>
</html>
我會以javascript做程式的解說
這部分的目的是提供頁面上的基本視覺結構。
<h1>投履歷找工作管理系統</h1>
<form id="resumeForm">
<h2>上傳履歷</h2>
<input type="file" id="resume" accept=".pdf, .doc, .docx" required>
<button type="submit">上傳履歷</button>
</form>
<form> 表單：讓用戶上傳履歷。使用了 <input type="file"> 讓用戶可以選擇文件，並限制文件類型（只允許 .pdf, .doc, 和 .docx）。<button>：點擊後會提交表單並觸發 JavaScript 處理上傳。<div id="jobListings" class="job-listing">
<!-- 職位會透過 JavaScript 動態添加 -->
</div>
<div id="jobListings">：這個 div 是用來動態展示職位列表的容器。職位列表會通過 JavaScript 動態生成。<table id="appliedJobs">
<thead>
<tr>
<th>職位名稱</th>
<th>公司名稱</th>
<th>申請狀態</th>
</tr>
</thead>
<tbody>
<!-- 已申請職位會透過 JavaScript 動態添加 -->
</tbody>
</table>
<table> 表格：這個表格用來顯示用戶已申請的職位和其申請狀態。每次申請職位後，新的資料會被添加到這裡。const jobs = [
{ id: 1, title: '前端工程師', company: '科技公司A', status: '未申請' },
{ id: 2, title: '後端工程師', company: '科技公司B', status: '未申請' },
{ id: 3, title: '資料科學家', company: '數據公司C', status: '未申請' }
];
id（唯一識別碼）、title（職位名稱）、company（公司名稱）、status（申請狀態）。const appliedJobs = [];
function displayJobListings() {
const jobListings = document.getElementById('jobListings');
jobListings.innerHTML = ''; // 清空職位列表
innerHTML = '' 清空職位列表，以確保每次刷新時不會重複顯示。 jobs.forEach(job => {
const jobDiv = document.createElement('div');
jobDiv.classList.add('job');
forEach 迭代 jobs 陣列中的每個職位，並為每個職位創建一個 div 容器。 const jobTitle = document.createElement('h3');
jobTitle.innerText = `${job.title} - ${job.company}`;
jobDiv.appendChild(jobTitle);
h3 標題，並顯示職位名稱和公司名稱。 const applyButton = document.createElement('button');
applyButton.innerText = '申請此職位';
applyButton.disabled = job.status === '已申請';
applyButton.addEventListener('click', () => applyJob(job));
jobDiv.appendChild(applyButton);
jobListings.appendChild(jobDiv);
});
}
disabled = true)。applyJob(job) 函數進行職位申請。function applyJob(job) {
job.status = '已申請'; // 更新職位狀態
appliedJobs.push({
title: job.title,
company: job.company,
status: '審核中'
});
displayJobListings();
displayAppliedJobs();
}
appliedJobs 陣列中（狀態初始為 "審核中"）。function displayAppliedJobs() {
const appliedJobsTable = document.getElementById('appliedJobs').querySelector('tbody');
appliedJobsTable.innerHTML = ''; // 清空已申請職位列表
appliedJobs.forEach(appliedJob => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${appliedJob.title}</td>
<td>${appliedJob.company}</td>
<td><span class="status">${appliedJob.status}</span></td>
`;
appliedJobsTable.appendChild(row);
});
}
appliedJobs 陣列，將每個已申請職位添加到表格中。document.getElementById('resumeForm').addEventListener('submit', function(e) {
e.preventDefault();
const resume = document.getElementById('resume').files[0];
if (resume) {
alert('履歷上傳成功！');
} else {
alert('請選擇一個檔案。');
}
});
e.preventDefault())，並檢查用戶是否已選擇檔案。如果有檔案，顯示上傳成功訊息，否則提示用戶選擇檔案。displayJobListings();
displayJobListings() 來顯示職位列表，這樣頁面加載時會立即顯示可申請的職位。這個 JavaScript 投履歷找工作系統讓用戶能夠上傳履歷、查看並申請職位、以及追蹤已申請的職位狀態。每個步驟都由清晰的 JavaScript 函數來處理，用戶界面和邏輯相對獨立且容易理解。
iThome鐵人賽
看影片追技術